<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 用户信息
const userInfo = ref({
  avatar: 'src/assets/pic/userImg/yhtx01.png',
  nickname: '用户',
  phone: '183****8822',
  level: '黄金会员'
})


const profileOptions = ref([
  {
    icon: '📋',
    title: '我的订单',
    desc: '查看所有订单记录',
    action: () => router.push('/orders')
  },
  {
    icon: '📍',
    title: '收货地址',
    desc: '管理收货地址',
    action: () => console.log('收货地址')
  },
  {
    icon: '💳',
    title: '我的钱包',
    desc: '余额、优惠卷、积分',
    action: () => console.log('我的钱包')
  },
  {
    icon: '🎁',
    title: '邀请好友',
    desc: '邀请好友获得奖励',
    action: () => console.log('邀请好友')
  }
])

const settingsOptions = ref([
  {
    icon: '⚙️',
    title: '设置',
    desc: '账户设置、隐私设置',
    action: () => console.log('设置')
  },
  {
    icon: '❓',
    title: '帮助与反馈',
    desc: '常见问题、意见反馈',
    action: () => console.log('帮助与反馈')
  },
  {
    icon: 'ℹ️',
    title: '关于我们',
    desc: '版本信息、服务条款',
    action: () => console.log('关于我们')
  }
])

const logout = () => {
  localStorage.removeItem('token')
  router.push('/login')
}
</script>

<template>
  <div
    class="w-full h-12vw bg-blue-500 text-white text-4.8vw fixed left-0 top-0 z-1000 flex justify-center items-center">
    个人主页
  </div>
  <div class="p-4 pt-[calc(12vw+1rem)] bg-gray-100 min-h-screen">
    <div class="bg-white rounded-3xl p-6 mb-4 shadow flex justify-between items-center">
      <div class="flex items-center gap-4">
        <div style="width:60px; height:60px;" class="rounded-full overflow-hidden">
          <img
            :src="userInfo.avatar"
            alt="头像"
            class="w-full h-full object-cover"
            @error="(e) => (e.target as HTMLImageElement).src = '/src/assets/pic/default-avatar.png'">
        </div>
        <div class="flex flex-col gap-1">
          <div class="text-lg font-bold text-gray-800">{{ userInfo.nickname }}</div>
          <div class="text-sm text-gray-500">{{ userInfo.phone }}</div>
          <div class="text-xs text-yellow-500">{{ userInfo.level }}</div>
        </div>
      </div>
      <div>
        <el-button type="primary" size="small" round>编辑资料</el-button>
      </div>
    </div>
    <div class="mb-4">
      <div class="text-base font-bold mb-2">我的服务</div>
      <div>
        <div v-for="option in profileOptions" :key="option.title"
          class="flex items-center justify-between p-4 bg-white rounded-xl mb-2 cursor-pointer" @click="option.action">
          <div class="text-2xl">{{ option.icon }}</div>
          <div class="flex-1 ml-4">
            <div class="font-bold">{{ option.title }}</div>
            <div class="text-xs text-gray-500">{{ option.desc }}</div>
          </div>
          <div class="text-gray-400">&gt;</div>
        </div>
      </div>
    </div>
    <div class="mb-4">
      <div class="text-base font-bold mb-2">设置</div>
      <div>
        <div v-for="option in settingsOptions" :key="option.title"
          class="flex items-center justify-between p-4 bg-white rounded-xl mb-2 cursor-pointer" @click="option.action">
          <div class="text-2xl">{{ option.icon }}</div>
          <div class="flex-1 ml-4">
            <div class="font-bold">{{ option.title }}</div>
            <div class="text-xs text-gray-500">{{ option.desc }}</div>
          </div>
          <div class="text-gray-400">&gt;</div>
        </div>
      </div>
    </div>
    <div class="flex justify-center mt-8">
      <el-button type="danger" size="large" @click="logout" class="w-full">退出登录</el-button>
    </div>
  </div>
</template>
